<template>
  <div class="mask" @click.stop="handleEditItem(item,index)" :class="{'is-helper':isItem(item,showHelper), 'is-select':isItem(item)}">
    <div class="del"><i class="el-icon-delete icons" @click.stop="removeItem(item)"></i></div>
    <XdhTableItem v-bind="clone(item)" :type="item.type" :label="item.label" :prop="item.prop" @mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave(item)" />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import XdhTableItem from '@/widgets/xdh-table/xdh-table-item'

export default {
  name: "TableButton",
  components: { XdhTableItem },
  props: {
    item: {
      type: Object,
      default() {
        return {

        }
      }
    },
    index: {
      type: Number,
      default: 0
    },
    flag: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      showHelper: null,
      dragging: false,
      ismousedown: false,
      class_editField: false,
    }
  },
  created() {
    // this.class_editField =
    console.log(this.ButtonEditField)
  },
  computed: {
    ...mapState({
      form: state => state.formModel,
      fields: state => state.fields,
      editField: state => state.editField,
      tableEditField: state => state.tableEditField,
      ButtonEditField: state => state.ButtonEditField,
    }),
    ...mapGetters(['model', 'nodeInfo']),
    classes() {
      return {
        'is-empty': this.fields.length === 0
      }
    }
  },
  watch: {
    ButtonEditField: {
      handler(val) {
        console.log(val)
        // this.isItem();
      },
      deep: true
    }

  },
  methods: {
    clone(data) {
      console.log('clone')
      return JSON.parse(JSON.stringify(data))
    },
    handleEditItem(item, index) {
      this.$store.commit('setEditTableField', null)
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      console.error(item, "12321321321")
      item.index = index;
      let info = Object.assign({}, item);
      // this.$store.dispatch('user/setNodeinfo', info);
      this.$store.commit('setEditButtonField', info)
      this.$store.commit('setEditType', { type: 'button', flag: this.flag })
      console.log(this._.isEqual(item, this.ButtonEditField), this.ButtonEditField, item)
      console.log('handleEditItem', this.$store.getters, 8888888888);
      // this.$store.commit('setSearchEditField', info)
      this.class_editField = this._.isEqual(item, this.ButtonEditField)
    },
    removeItem(item) {
      this.$store.commit('setEditTableField', null)
      this.$store.commit('setEditField', null)
      this.$store.commit('setEditButtonField', null)
      this.flag == 'left' ? this.$store.commit('removeLeftButtonField', item) : this.$store.commit('removeRightButtonField', item)
    },
    handleDblClick() {
      this.$store.commit('setEditField', null)
    },
    isItem(item,showitem=this.ButtonEditField) {
      return this._.isEqual(item, showitem);
    },
    handleMouseEnter(item) {
      console.log(item)
      this.showHelper = item
    },
    handleMouseLeave(item) {
      console.log(item)
      this.showHelper = null
    },
  }
}
</script>

<style>
.mask {
  float: left;
  position: relative;
  min-width: 70px;
  min-height: 40px;
  margin-left: 5px;
}
.mask .del {
  position: absolute;
  top: 0px;
  right: 0px;
}

.is-select {
  display: block;
  border: 3px dotted #e6a23c;
  background: rgba(230, 162, 60, 0.2);
}

.is-helper {
  display: block;
  border: 3px dotted greenyellow !important;
  background: rgba(103, 194, 58, 0.2) !important;
}
</style>
